<template>
  <div class="gantt-leftbar">
    <div
        class="gannt-group-menu"
        :style="{
        width: '100%',
        height: cellHeight + 'px'
      }"
        v-if="isShowStatistics"
    >
      <div class="type-title">
        <p>分组类型：</p>
        <p>数量：{{ datas.length }}</p>
      </div>
      <div class="classify-tags">
        <template v-if="Object.keys(groupType).length">
          <div class="classify-tag" v-if="groupType.type">
            {{ groupType.type }}
          </div>
          <div class="classify-tag" v-if="groupType.speed">
            {{ groupType.speed }}
          </div>
        </template>
        <template v-else>
          <div class="classify-tag">
            全部
          </div>
        </template>
      </div>
      <div
          :class="[
          'btn-toggle',
          isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
        ]"
          @click="toggleOpen(groupIndex)"
      />
    </div>
    <div
        v-show="isOpen"
        ref="wrapperElement"
        class="left-bar-wrapper"
        :style="{
        height: datas.length * cellHeight + 'px'
      }"
    >
      <div
          class="gantt-leftbar-item"
          :style="{
          top: data.rawIndex * cellHeight + 'px',
          height: `${cellHeight}px`
        }"
          v-for="(data, index) in datas"
          :key="dataKey ? data[dataKey] : index"
      >
        <slot :rowData="data">
          <div class="gantt-leftbar-defalutItem">need slot</div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {PropType, ref} from 'vue';

// import { EventBus } from '@/event-bus'; // 假设你有一个全局的事件总线，如果不是，请根据实际情况调整

interface GroupType {
  type?: string;
  speed?: string;
  // 其他可能的属性
}

interface LeftBarData {
  rawIndex: number;
  // 其他可能的属性
}

const props = defineProps({
  dataKey: {
    type: String as PropType<string | undefined>,
    default: undefined
  },
  unVisibleHeight: {
    type: Number as PropType<number>,
    required: true
  },
  datas: {
    type: Array as PropType<LeftBarData[]>,
    required: true
  },
  groupType: {
    type: Object as PropType<GroupType>,
    default: () => ({})
  },
  groupIndex: {
    type: Number as PropType<number>,
    default: 0
  },
  cellHeight: {
    type: Number as PropType<number>,
    required: true // 假设 cellHeight 是必需的，如果不是，请移除 required: true
  },
  isOpen: {
    type: Boolean,
    default: () => {
      return true
    }
  },
  isShowStatistics: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})

const wrapperElement = ref<HTMLElement | null>(null);

// 如果 showDatas 和 toggleOpen 是从 mixin 中来的，确保 mixin 也用 TypeScript 改写
// 并且这些属性或方法被正确地导出和导入
// 由于这里看不到 mixin 的实现，我们假设它们已经被正确处理

// 示例方法，如果 toggleOpen 是从 mixin 来的，则不需要这里再定义
const toggleOpen = (groupIndex: number) => {
  // 假设你有一个全局的事件总线用于组件间通信
  // 如果不是，请根据实际情况调整（例如使用 Vue 3 的 provide/inject 或其他状态管理库）
  // EventBus.$emit('toggleGroupOpen', groupIndex);
  // 或者如果你在使用 Vue 3 的 Composition API，可以这样做：
  // emit('toggleGroupOpen', groupIndex); // 但这需要你在父组件中监听这个事件
};

// 注意：由于我们在这里使用了 setup 函数，我们不能再直接访问 this
// 所有与 Vue 实例相关的操作都应该通过 setup 函数的参数来进行

// 由于 showDatas 在模板中被使用，但在这里没有定义，我们假设它是从 mixin 中来的
// 或者你应该在 setup 函数中定义它（如果它是计算属性或响应式数据）

// 示例：如果 showDatas 是一个计算属性，你可以这样定义它
// const showDatas = computed(() => {
//   // 返回处理后的数据
// });

// 由于我们在这个例子中没有定义 showDatas，我们保留模板中的用法不变
// 但请注意，如果 showDatas 不是从 mixin 中来的，你需要在这里定义它

// 如果你没有在 setup 中定义所有需要的东西，并且还需要使用 methods, computed 等选项，
// 你可以像这样混合使用 Options API 和 Composition API：
// methods: {
//   toggleOpen(groupIndex: number) {
//     // 方法实现
//   }
//   // 其他方法...
// },
// computed: {
//   // 计算属性...
// },
// ...（其他选项）
</script>
